M
MLOG
React Suspense: Координація ресурсів: Освоюємо управління завантаженням множинних ресурсів | MLOG | MLOG

Переваги:

Недоліки:

2. Послідовне завантаження із залежностями

Коли ресурси залежать один від одного, вам потрібно завантажувати їх послідовно. Suspense дозволяє вам організувати цей потік, вкладаючи компоненти, які отримують залежні ресурси.

Приклад: спочатку завантажте дані користувача, а потім використовуйте ідентифікатор користувача, щоб отримати його дописи.

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

Переваги:

Недоліки:

3. Комбінування паралельного та послідовного завантаження

У багатьох сценаріях ви можете об’єднати як паралельне, так і послідовне завантаження для оптимізації продуктивності. Завантажуйте незалежні ресурси паралельно, а потім завантажуйте залежні ресурси послідовно після завантаження незалежних.

Приклад: завантажте дані користувача та останню активність паралельно. Потім, після завантаження даних користувача, отримайте дописи користувача.

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');
const activityResource = fetchData('/api/activity');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();
  const activity = activityResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Last activity: {activity.date}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

У цьому прикладі `userResource` і `activityResource` отримуються паралельно. Після того, як дані користувача стануть доступними, відображається компонент `UserPosts`, запускаючи отримання дописів користувача.

Переваги:

Недоліки:

4. Використання React Context для спільного використання ресурсів

React Context можна використовувати для спільного використання ресурсів між компонентами та уникнення повторного отримання одних і тих самих даних кілька разів. Це особливо корисно, коли кільком компонентам потрібен доступ до одного й того самого ресурсу.

Приклад:

            
import React, { createContext, useContext, Suspense } from 'react';
import fetchData from './fetchData';

const UserContext = createContext(null);

function UserProvider({ children }) {
  const userResource = fetchData('/api/user');

  return (
    
      {children}
    
  );
}

function UserProfile() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function UserAvatar() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    {user.name}
  );
}

function App() {
  return (
    
      Loading user profile...
}> ); } export default App;

У цьому прикладі `UserProvider` отримує дані користувача та надає їх усім своїм дочірнім елементам через `UserContext`. Обидва компоненти `UserProfile` і `UserAvatar` можуть отримати доступ до тих самих даних користувача, не отримуючи їх повторно.

Переваги:

Недоліки:

5. Межі помилок для надійної обробки помилок

Suspense добре працює з межами помилок для обробки помилок, які виникають під час отримання даних або рендерингу. Межі помилок — це React-компоненти, які перехоплюють помилки JavaScript у будь-якій частині дерева дочірніх компонентів, реєструють ці помилки та відображають резервний інтерфейс замість аварійного завершення всього дерева компонентів.

Приклад:

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';
import ErrorBoundary from './ErrorBoundary';

const userResource = fetchData('/api/user');

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function App() {
  return (
    Something went wrong!
}> Loading user profile...}> ); } export default App;

У цьому прикладі `ErrorBoundary` перехоплює будь-які помилки, які виникають під час рендерингу компонента `UserProfile` або отримання даних користувача. Якщо виникає помилка, він відображає резервний інтерфейс, запобігаючи аварійному завершенню всієї програми.

Переваги:

Недоліки:

Практичні міркування для глобальної аудиторії

Під час розробки React-застосунків для глобальної аудиторії враховуйте наступне:

Дієві висновки та найкращі практики

Ось декілька дієвих висновків і найкращих практик для керування завантаженням множинних ресурсів за допомогою React Suspense:

Висновок

React Suspense надає потужний і гнучкий механізм для керування асинхронними операціями та покращення взаємодії користувачів із вашими програмами. Розуміючи основні концепції Suspense та ресурсів і застосовуючи стратегії, викладені в цій публікації в блозі, ви можете ефективно керувати завантаженням множинних ресурсів і створювати більш чуйні та надійні React-застосунки для глобальної аудиторії. Не забувайте враховувати інтернаціоналізацію, доступність та оптимізацію продуктивності під час розробки програм для користувачів у всьому світі. Дотримуючись цих найкращих практик, ви можете створювати програми, які є не лише функціональними, але й зручними та доступними для всіх.